<template>

  <div class="msgBox">

    <div class="msgContentBox" @click='closeEmoji'>
        <div id='content' class="wrapMsg" @click='closetab'>
          <div class="pulldow">
            <p class='moreLoad' v-if='loading' @click='refresh'>加载更多</p>
            <p class='moreLoad' v-if='loadingOn'>加载中...</p>
            <p v-if='Loaded'>无更多数据</p>
          </div>
          <div class="item" :class="item.fromUser.userId === userId ? 'mind' : ''" v-for='(item,index) in messages' :key='index'>
            <p v-if="item.type.value !=='event'" class='time' v-html="timetamp(item.timestamp)"></p>
            <p v-if="item.type.value === 'event'" class='time' v-text="item.content"></p>

            <div class="txtBox" v-if="item.type.value !=='event'">
              <div class="header">
                <img :src='item.fromUser.logo' alt="" class="logo">
              </div>
              <div class="messages" >
                <p v-text="item.fromUser.name" class="name"></p>
                  <div class="content" v-if="item.type.value !=='event'">
                    <p v-if="item.type.value === 'txt' || item.type.value === 'chat'"  v-html="emoji(item.content)"></p>
                    <img v-image-preview  class='image' v-if="item.type.value === 'image'" :src="item.content" alt="">
                    <video v-if="item.type.value === 'video'" :src="item.content" controls="controls"></video>
                    <audio   v-if="item.type.value === 'audio'" :src="item.content" controls="controls"></audio>

                    <div class='questionBox' v-if="item.type.value === 'question'">
                        <p>您问的是否是以下问题，点击或回复即可得到对应问题的答案：</p>
                        <a  class='question' @click='getanswer(index+1,i.answer)' v-for='(i,index) in item.content' :key='index+1'>
                          {{(index+1)+'. '+i.question}}
                        </a>
                    </div>
                  </div>
              </div>

            </div>

          </div>
              <p class='noOn' v-if='noline'>{{NoOnline}}你可以 <b @click='openMsg'>留言</b></p>
        </div>
    </div>


     <!-- 正在录音的icon显示 -->

      <div class='beingRecordings' v-show='beingRecordingsStatus'>
          <img src="../assets/audio/voice3.png" alt="">
          <p>正在录音</p>
          <p>{{timeRecord}}</p>
      </div>


    <!-- 输入框 -->

    <div class="inputBOX">

      <div class="bigImput">
        <div class="footerINPUT">
          <div class="otherBOX" @click='toHuman' v-show='service'>
            <span class='trun'>人工<br>服务</span>
          </div>
           <span class='voiceCall' @click='changevoice' v-show='voiceCall'></span>
           <span class='keyborad' @click='changekeyborad' v-show='keyborad'></span>
           <div class='chat-say' v-if='voiceBtn'>
              <input v-show='!cancer' type='button' class='one' @click='startRecording' value='点击 说话'>
              <input v-show='cancer' type='button' class='tow'  @click='stopRecording' value='点击 结束'>
              <span  ></span>
          </div>
          <textarea v-show='textarea' type="text" placeholder="请简短描述你的问题" v-model='message' v-on:input='showSubmit'
                 @keyup.enter="sendMessage"></textarea>
          <div class="otherBOX">
            <a href="javascript:;" v-show='submit' @click='sendMessage'>发送</a>
            <span class='showEmoji' @click='showFace' v-show='nomalfalse'></span>
            <span @click='showMore' v-show='!submit'></span>
          </div>

          <!-- qq表情 -->

          <div class="qqFace" v-if='!qqFaceShow'>
            <vue-emoji
              @select="selectEmoji">
            </vue-emoji>
            <span class="pop-arrow arrow"></span>
          </div>

        </div>
      </div>



      <div class="footerOver">
        <div class="footeroff">
          <a href="javascript:;" @click='open'>
            <img src="../assets/icon_love.png" alt="">
            <h3>满意度</h3>
          </a>
          <a href="javascript:;" @click='reload'>
            <img src="../assets/message.png" alt="">
            <h3>继续会话</h3>
          </a>
          <a href="javascript:;" @click='openMsg'>
            <img src="../assets/e-mail.png" alt="">
            <h3>留言</h3>
          </a>
        </div>
      </div>


    </div>

    <!-- 更多功能 -->

    <div class="more" v-if='!moreFun'>
      <div class="item" v-if='picShow'>
        <img src="../assets/photo.png" alt="">
        <input id='file' type="file" @change="updatePhoto" accept="image/*">
        <p>图片</p>
      </div>
      <div class="item" @click='open'>
        <img class='heart' src="../assets/icon_love.png" alt="">
        <p>评价</p>
      </div>
      <div class="item" @click='openMsg'>
        <img class='message' src="../assets/e-mail.png" alt="">
        <p>留言</p>
      </div>
    </div>

    <evalute ref="evalute"/>

    <leavingMsg ref="leavingMsg"/>

  </div>


</template>

<script>
import chat from "../libs/chat";
import keyword from "../libs/keyword";
import evalute from "./evalute"; //评价
import leavingMsg from "./leavingMsg"; //留言
import bus from "./bus";
import vueEmoji from "./emoji.vue";
import EasyUpload from "../libs/EasyUpload";
import VueDirectiveImagePreviewer from "vue-directive-image-previewer/dist";
import imagePreviewer from "vue-directive-image-previewer/src/imagePreviewer.vue";
import audio from "../libs/audio.js";

export default {
  name: "home",
  data() {
    return {
      Loaded: false,
      loadingOn: false,
      voiceBtn: false,
      voiceCall: null,
      cancer: false,
      beingRecordingsStatus: false,
      keyborad: false,
      textarea: true,
      timeRecord:'00:00',
      submit: false, //提交按钮的显示隐藏
      message: "", //输入的信息
      qqFaceShow: true, //显示emoji
      moreFun: true,
      noline: false,
      loading: true,
      NoOnline: "", //暂无人工服务的提示语句
      nomalfalse: true, //设置人工服务和emoji为隐藏
      picShow: false,
      service: true, //默认显示人工服务
      firstRobot: "",
      messages: [], //聊天的信息
      value: "",
      h5Token: "", //token
      second: "",
      ShutdownMessage: "",
      timeOutSecond: "",
      timeOutMsg: "",
      originSecond: 300,
      origintimeOutSecond: 150,
      page: 1,
      limit: 15,
      callTime:0,
      userId: "",
      toUser: {
        userId: "",
        userName: "",
        userLogo: ""
      },
      questionInfor: "",
      robotQuestion: "",
      recorder: "",
      recorderSoure: "", //录音资源
      contentKeyword: "",
      timerIntervalRecording:''
    };
  },

  methods: {
    //关键字列表
    handleKeyword() {
      keyword.getKeyWord(this.h5Token,res => {
        if (res.code === 200) {
          this.contentKeyword = res.data;
        } else {
          alert(res.error);
        }
      });
    },

    //检索输入的值中是否有关键字
    hasIsthere() {
       if(this.message !== '' && this.contentKeyword.length > 0){
       let a = this.contentKeyword.join('|');
       let reg = new RegExp(a);
        if(reg.test(this.message)){
          alert(`您输入的内容含有非法内容,请文明聊天`);
        } else {
          return true;
        }
      }else{
        return true;
      }
    },

    //更改录音
    changevoice() {
      this.voiceCall = false;
      this.voiceBtn = true;
      this.textarea = false;
      this.keyborad = true;
    },

    //切换到软键盘
    changekeyborad() {
      this.voiceCall = true;
      this.voiceBtn = false;
      this.textarea = true;
      this.keyborad = false;
    },

    //将时间戳转换为时间
    timetamp(timestamp) {
      return chat.formatDate(timestamp, "yyyy-MM-dd hh:mm:ss");
    },

    //继续会话，重新刷新页面
    reload() {
      window.location.reload();
    },

    //根据相应问题得到回复
    getanswer(index, answer) {
      // let _self = this;
      this.messages.push({
        Onside: true,
        type: {
          value: "txt"
        },
        content: "" + index,
        fromUser: {
          userId: chat.my().userId,
          name: chat.my().userName,
          logo: chat.my().userLogo
        },
        timestamp: Math.round(new Date().getTime() / 1000).toString()
      });
      this.messages.push({
        Onside: false,
        type: {
          value: "txt"
        },
        content: answer,
        fromUser: {
          userId: this.robotQuestion.userId,
          name: this.robotQuestion.name,
          logo: this.robotQuestion.logo
        },
        timestamp: Math.round(new Date().getTime() / 1000).toString()
      });
      this.autoScroll();
    },

    //加载更多
    refresh() {
      let _self = this;
      let myUserId = chat.my().userId;

      let time = this.messages[0].fromUser.userId;
      console.log(myUserId);
      _self.loadingOn = true;
      _self.loading = false;
      setTimeout(() => {
        chat.history(myUserId, this.page, this.limit, time, "", function(res) {
          let data = res.data;
          if (res.code === 200) {
            if (res.data.length > 0) {
              for (let i = 0; i < data.length; i++) {
                _self.messages.unshift(data[i]);
              }
              _self.loadingOn = false;
              _self.loading = true;
              _self.Loaded = false;
              console.log(_self.messages);
            } else {
              _self.loadingOn = false;
              _self.Loaded = true;
            }
          } else {
            alert(res.error);
          }
        });
      }, 1500);
    },
    updatePhoto() {
      //上传图片
      let _self = this;
      EasyUpload.init(
        process.env.API_URL + "/home/upload/add",
        {},
        "file",
        "file",
        function(data) {
          if(data.code === 200){
              let imgPath = data.data;
              _self.messages.push({
                Onside: true,
                content: imgPath,
                type: {
                  value: "image"
                },
                fromUser: {
                  userId: chat.my().userId,
                  name: chat.my().userName,
                  logo: chat.my().userLogo
                },

                timestamp: Math.round(new Date().getTime() / 1000).toString()
              });
              chat.sendMessage(
                imgPath,
                chat.cs().userId,
                "image",
                "none",
                _self.toUser.cvaId
              );
              _self.autoScroll();
              _self.moreFun = true;
          }else{
            alert(data.error);
          }
        },
        function(e) {
          console.log(e);
        }
      );

      EasyUpload.upload();
    },

    //倒计时300秒的方法
    countDown() {
      let _self = this;

      this.timer = setInterval(function() {
        if (_self.second >= 0) {
          _self.second--;
        } else {
          clearInterval(_self.timer);
          // console.log(time);
          _self.messages.push({
            Onside: false,
            type: {
              value: "txt"
            },
            content: _self.ShutdownMessage,
            fromUser: {
              userId: chat.agent().robot.userId,
              name: chat.agent().robot.name,
              logo: chat.agent().robot.logo
            },

            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
          chat.closeCva();
          chat.close();
          $(".bigImput").css("display", "none");
          $(".footerOver").css("display", "block");
          _self.autoScroll();
        }
      }, 1000);
    },
    //倒计时150秒的方法
    countDown2() {
      let _self = this;

      this.timer2 = setInterval(function() {
        if (_self.timeOutSecond >= 0) {
          _self.timeOutSecond--;
        } else {
          clearInterval(_self.timer2);
          //console.log(time);
          _self.messages.push({
            Onside: false,
            type: {
              value: "txt"
            },
            content: _self.timeOutMsg,
            fromUser: {
              userId: chat.agent().robot.userId,
              name: chat.agent().robot.name,
              logo: chat.agent().robot.logo
            },

            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
          _self.autoScroll();
        }
      }, 1000);
    },

    selectEmoji(code) {
      this.qqFaceShow = !this.qqFaceShow;
      this.message += code;
      this.submit = true;
      this.nomalfalse = false;
    },

    //页面加载自动读取第一条信息
    requestRobot(pushRobotMessage) {
      this.userId = chat.my().userId;
      let data = chat.agent().greetingSettings,
        robotContent,
        notifyMessage,
        messageOn;
      let _self = this;
      for (let i = 0; i < data.length; i++) {
        if (data[i].greetingType.value === "h5") {
          _self.second = data[i].customerShutdownSetting.seconds; //得到系统自动结束本次会话的时间300秒
          _self.ShutdownMessage = data[i].customerShutdownSetting.message; //得到300秒的会话
          _self.timeOutSecond = data[i].customerTimeoutSetting.seconds; //  得到150秒
          _self.timeOutMsg = data[i].customerTimeoutSetting.message; //  得到150秒的会话
          robotContent = data[i].robot; //得到机器人自动回复
          messageOn = data[i].notifyMessageOn;
          if (messageOn) {
            notifyMessage = data[i].notifyMessage; //得到通告的第一句
          }
          break;
        }
      }
      if (pushRobotMessage) {
        _self.nomalfalse = false;
        _self.voiceCall = false;

        if (messageOn) {
          _self.messages.push({
            Onside: false,
            type: {
              value: "txt"
            },
            content: notifyMessage,
            fromUser: {
              userId: chat.agent().robot.userId,
              name: chat.agent().robot.name,
              logo: chat.agent().robot.logo
            },
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
        }

        _self.messages.push({
          Onside: false,
          content: robotContent,
          type: {
            value: "txt"
          },
          fromUser: {
            userId: chat.agent().robot.userId,
            name: chat.agent().robot.name,
            logo: chat.agent().robot.logo
          },
          timestamp: Math.round(new Date().getTime() / 1000).toString()
        });

        _self.autoScroll();

        console.log(_self.messages);
      }
    },

    //请求机器人
    sendMessage() {
      let _self = this;

      if (_self.message !== 1) {
        if (this.hasIsthere()) {
          let result = this.getQuestion(_self.message);

          _self.messages.push({
            Onside: true,
            content: _self.message,
            type: {
              value: "txt"
            },
            fromUser: {
              userId: chat.my().userId,
              name: chat.my().userName,
              logo: chat.my().userLogo
            },
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });

          if (result) {
            _self.messages.push({
              Onside: false,
              type: {
                value: "txt"
              },
              content: result,
              fromUser: {
                userId: _self.robotQuestion.userId,
                name: _self.robotQuestion.name,
                logo: _self.robotQuestion.logo
              },
              timestamp: Math.round(new Date().getTime() / 1000).toString()
            });
          } else {
            if (chat.cs()) {
              _self.nomalfalse = true;
              chat.sendMessage(_self.message, chat.cs().userId, "chat", "none");
            } else {
              chat.chatToRobot(this.message, function(res) {
                let data = res.data;
                if (data.type.value === "question") {
                  _self.robotQuestion = data.fromUser;
                  _self.questionInfor = JSON.parse(data.content);

                  _self.messages.push({
                    Onside: false,
                    type: {
                      value: data.type.value
                    },
                    content: _self.questionInfor,
                    fromUser: {
                      userId: data.fromUser.userId,
                      name: data.fromUser.name,
                      logo: data.fromUser.logo
                    },
                    timestamp: Math.round(
                      new Date().getTime() / 1000
                    ).toString()
                  });
                } else {
                  _self.messages.push({
                    Onside: false,
                    type: {
                      value: data.type.value
                    },
                    content: data.content,
                    fromUser: {
                      userId: data.fromUser.userId,
                      name: data.fromUser.name,
                      logo: data.fromUser.logo
                    },
                    timestamp: Math.round(
                      new Date().getTime() / 1000
                    ).toString()
                  });
                }
                _self.autoScroll();
              });
            }
          }
          this.resetTime();
          _self.message = "";
          _self.submit = false;

          _self.autoScroll();
        }
      }
    },

    //输入问题序号得到相应的答案
    getQuestion(message) {
      let _self = this;
      if (this.questionInfor === "") {
        return false;
      } else {
        for (let ques = 0; ques < _self.questionInfor.length; ques++) {
          if (Number(message) - 1 === ques) {
            return _self.questionInfor[ques].answer;
          }
        }
      }
      return false;
    },

    //重置时间
    resetTime() {
      this.second = this.originSecond;
      this.timeOutSecond = this.origintimeOutSecond;
    },

    showFace() {
      this.qqFaceShow = !this.qqFaceShow;
      this.moreFun = true;
    },
    showMore() {
      this.moreFun = !this.moreFun;
      this.qqFaceShow = true;
    },

    autoScroll() {
      setTimeout(() => {
        let content = document.getElementById("content");
        content.scrollTop = content.scrollHeight - content.clientHeight;
      }, 20);
    },

    toHuman() {
      //click人工显示默认隐藏的icon
      chat.connectToHuman(json => {
        if (json.status) {
          this.showHumanChatButtons();
        } else {
          this.voiceCall = false;
          this.nomalfalse = true;
          this.noline = true;
          this.NoOnline = json.message;
          this.autoScroll();
        }
      });
    },

    showHumanChatButtons() {
      this.picShow = true;
      this.nomalfalse = true;
      this.voiceCall = true;
      this.service = false;
      this.noline = false;
    },

    //让发送按钮显示
    showSubmit() {
      if (this.message !== "") {
        this.submit = true;
        this.nomalfalse = false;
      } else {
        this.submit = false;
        this.nomalfalse = false;
      }
    },

    open() {
      //打开满意度调查 > 人工
      this.$refs.evalute.openEvalute();
      this.$refs.evalute.getEvaluteServer(this.h5Token);
    },

    openMsg() {
      this.$refs.leavingMsg.openLeaving();
      this.$refs.leavingMsg.hasMsg(this.h5Token);
      console.log(this.h5Token);
    },

    closetab() {
      this.moreFun = true;
      this.moreFun = true;
    },

    closeEmoji() {
      this.qqFaceShow = true;
    },
    handleChatMessage(data) {
      this.messages.push({
        Onside: false,
        content: data.content,
        type: {
          value: data.type.value
        },
        fromUser: {
          userId: data.fromUser.userId,
          name: data.fromUser.name,
          logo: data.fromUser.logo
        },

        timestamp: Math.round(new Date().getTime() / 1000).toString()
      });
      this.autoScroll();
    },
    handleEventMessage(data) {
      switch (data.event.value) {
        case "none":
          break;
        case "compose":
          break;
        case "received":
          break;
        case "human":
          break;
        case "redirect":
        case "beTake":
          chat.setCs(data.fromUser);
          this.toUser.userLogo = chat.cs().logo;
          this.toUser.userName = chat.cs().name;
          this.toUser.userId = chat.cs().userId;
          this.showHumanChatButtons();
          break;
        case "online":
          break;
        case "offline":
          break;
        case "leave":
          break;
        case "busy":
          break;
        case "send":
          break;
        case "history":
          let messages = JSON.parse(data.content);
          console.log(messages);
          this.nomalfalse = true;
          this.voiceCall = true;
          this.picShow = true;
          this.keyborad = false;
          for (let i = 0; i < messages.length; i++) {
            if ("event" === messages[i].type) continue;
            let mine = chat.my().userId === messages[i].from;
            this.messages.unshift({
              Onside: mine,
              content: messages[i].content,
              type: {
                value: messages[i].type
              },
              fromUser: {
                userId: mine ? chat.my().userId : messages[i].fromUser.userId,
                name: mine ? chat.my().userName : messages[i].fromUser.name,
                logo: mine ? chat.my().userLogo : messages[i].fromUser.logo
              },
              timestamp: Math.round(new Date().getTime() / 1000).toString()
            });
          }
          console.log(this.messages);
          this.autoScroll();
          break;
        case "illegal":
          break;
      }
    },

    //点击录音
    startRecording() {
      var _self = this;

      audio.get(function(rec) {
        _self.recorder = rec;
        console.log(_self.recorder);
        _self.recorder.start();

        if (_self.recorder) {
         _self.timerIntervalRecording = setInterval(() => {
              _self.callTime++;
              let fen = _self.callTime/60;
              let miao = _self.callTime%60;
              _self.timeRecord = `${_self.padZero(parseInt(fen))}:${_self.padZero(miao)}`;
          },1000);
          _self.cancer = true;
          _self.beingRecordingsStatus = true;
        }
      });
    },

    padZero(num) {
      let tmp = num + '';
      if (tmp.length < 2) {
          return `0${tmp}`;
      }
      return num;
    },

    //点击结束录音
    stopRecording() {
      let _self = this,
        recorderSoure = this.recorder.getBlob();
      this.recorder.stop();

      this.recorder.upload(process.env.API_URL + "/admin/blobUpload", function(
        e,
        result
      ) {
        if (e === "ok") {
          clearInterval(_self.timerIntervalRecording);
          _self.callTimeText='00:00';
          _self.autoScroll();
          _self.cancer = false;
          _self.beingRecordingsStatus = false;
          console.log(JSON.parse(result.target.responseText).data);

          _self.messages.push({
            Onside: true,
            content: JSON.parse(result.target.responseText).data,
            type: {
              value: "audio"
            },
            fromUser: {
              userId: chat.my().userId,
              name: chat.my().userName,
              logo: chat.my().userLogo
            },
            timestamp: Math.round(new Date().getTime() / 1000).toString()
          });
          chat.sendMessage(
            JSON.parse(result.target.responseText).data,
            chat.cs().userId,
            "audio",
            "none",
            _self.toUser.cvaId
          );
        }
      });
    }
  },
  created() {
    //监听moreFun为true
    bus.$on("moreFun", () => {
      this.moreFun = true;
    });
  },

  components: {
    evalute,
    leavingMsg,
    vueEmoji,
    imagePreviewer
  },

  mounted() {
    var height = $(window).height();
    $(".wrapMsg").css("height", height - 80);
    //console.log(height);
    $(window).resize(() => {
      height = $(window).height();
      //  console.log(height);
      $(".wrapMsg").css("height", height - 80);
    });

    chat.addValidateListener(json => {
      console.log(json);
      this.requestRobot(!chat.cs());
      this.countDown();
      this.h5Token = json.agentToken;
      this.handleKeyword();
      this.countDown2();  
      
      if (chat.cs()) {
        this.service = false;
        this.noline = false;
      }
    });
    chat.addMessageListener(event => {
      let data = JSON.parse(event.data);
      console.log(data);
      if (data.type.value === "event") {
        this.handleEventMessage(data);
      } else {
        this.handleChatMessage(data);
      }
    });

    // if(sessionStorage.getItem('HumanStatus')){
    //     this.voiceCall = true;
    //     this.picShow = true;

    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  /* display: inline-block; */
  margin: 0 10px;
}

a {
  color: #42b983;
}

.pulldow p,
.item p {
  color: #676e6f;
}

#_v-container {
  top: 0;
}

.header {
  width: 40px;
  height: 40px;
}

.header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.content video {
  width: 100%;
}

.txtBox {
  display: flex;
}

.messages {
  text-align: left;
  width: 100%;
  margin-left: 1rem;
}

.beingRecordings {
  background: rgba(0, 0, 0, 0.54);
  width: 120px;
  height: 120px;
  position: absolute;
  left: 34%;
  bottom: 50%;
  border-radius: 7px;
}

.beingRecordings img {
  width: 3rem;
  margin: .6rem 0 0.5rem 0;
}

.beingRecordings p {
  margin: 0;
  color: #fcfcfc;
  text-align: center;
}

.messages p {
  margin: 0;
  font-size: 0.7rem;
}

.noOn {
  font-size: 0.8em;
}

.noOn b {
  color: #019fdf;
}

.content {
  max-width: 82%;
  float: left;
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  padding: 0.47rem;
  margin: 0.7rem 0;
  border-radius: 3px;
  word-break: break-all;
}

.content div img {
  vertical-align: middle;
  margin-right: 0.2rem;
}

.content .question {
  color: #62bada;
  cursor: pointer;
  display: inherit;
  margin: 0.4rem 0;
}

.content p img {
  width: 1.5rem;
}

.content img {
  width: 10rem;
  vertical-align: middle;
}

.item > p {
  color: #676e6f;
  font-size: 0.8em;
  margin: 2rem 0 1rem 0;
}

.wrapMsg {
  padding: 0 1rem 2rem 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mind .txtBox {
  flex-direction: row-reverse;
}

.mind .messages {
  margin-left: 0;
  margin-right: 1rem;
}

.mind .messages p {
  text-align: right;
}

.messages .content p {
  margin: 0;
}

.mind .messages .content p {
  margin: 0;
  color: #fff;
  font-size: 0.77rem;
  text-align: left;
}
.messages .content div {
  font-size: 0.77rem;
}

.mind .content {
  float: right;
  background: #019fdf;
  color: #fff;
}

.msgBox {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.msgBox:active {
  background: #f0f0f0;
}

.inputBOX {
  position: fixed;
  background: #fff;
  padding: 0.3rem 0;
  width: 100%;
  text-align: left;
  bottom: 0;
  display: flex;
  border-top: 1px solid #d5d7d8;
}

.inputBOX textarea,
.chat-say {
  margin: 0.3rem 0.3rem 0 0;
  height: 1.5rem;
  line-height: 1.5rem;
  outline: none;
  border: none;
  resize: none;
  word-wrap: break-word;
  word-break: break-all;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  font-size: 12px;
  /* width: 111rem; */
  width: 83%;
  border-radius: 5px;
  border: 1px solid #eaeaea;
  text-indent: 0.5em;
}

.chat-say {
  text-align: center;
  height: 29px;
}

.chat-say .one,
.chat-say .tow {
  line-height: 2rem;
  text-align: center;
  height: 29px;
  width: 100%;
  margin-left: -0.5rem;
}

.pulldow p {
  font-size: 0.8em;
  color: #676e6f;
}

.content audio {
  width: 16rem;
}

.otherBOX {
  width: 15%;
  display: flex;
  position: relative;
}

.otherBOX span {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
  padding: 0 0.3rem;
}

.otherBOX .showEmoji {
  background: url("../assets/emoji.png") center center no-repeat;
  background-size: 1.4rem;
}

.voiceCall {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
  padding: 0 0.3rem;
  background: url("../assets/voice.png") center center no-repeat;
  background-size: 1.4rem;
}

.keyborad {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
  padding: 0 0.3rem;
  background: url("../assets/keyborad.png") center center no-repeat;
  background-size: 1.4rem;
}

.otherBOX span:last-child {
  background: url("../assets/more.png") center center no-repeat;
  background-size: 1.4rem;
}

.otherBOX a {
  width: 2.5rem;
  height: 1.7rem;
  line-height: 1.7rem;
  /* margin-left: 5px; */
  border-radius: 4px;
  color: #62bada;
  font-size: 14px;
  text-align: center;
  /* color: #aaa; */
  margin-right: -4px;
  /* border: 1px solid #62bada; */
  text-decoration: none;
  margin: 0.7rem auto;
}

.qqFace {
  position: fixed;
  width: 100%;

  display: flex;
  bottom: 3rem;
  padding: 1rem 0;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  background: #fff;
  border-top: 1px solid #d6d7d8;
  border-bottom: 1px solid #d6d7d8;
}

.emoji .emoji-controller li {
  width: 20%;
}

.emoji .emoji-container li a {
  width: 2.2rem;
}

.emoji-controller {
  display: flex;
  margin: 0;
}

.qqFace .qqIcon {
  width: 24px;
  height: 25px;
  display: block;
  margin: 0.4rem 3.8%;
}

.emoji {
  margin: 0;
}

.emoji .emoji-container li {
  display: flex;
  flex-wrap: wrap;
}

.more {
  position: fixed;
  display: flex;
  bottom: 3rem;
  background: #fff;
  width: 100%;
  text-align: left;
  padding: 1rem 0;
  border-bottom: 1px solid #e9eaea;
}

.more .item {
  width: 33.3%;
  position: relative;
  text-align: center;
  cursor: pointer;
}

.more .item img {
  width: 20px;
  margin-top: 0.3rem;
}

.more .item .heart {
  width: 22px;
}

.more .item .message {
  width: 20px;
  margin-bottom: 0.1rem;
}

.more .item:focus {
  outline: none;
}

.more .item p {
  margin: 0;
  font-size: 12px;
  color: #a3a3a3;
}

.more .item:first-child {
  position: relative;
}

.more .item:first-child input[type="file"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 55px;
  opacity: 0;
}

body .otherBOX .trun {
  font-size: 0.67rem;
  color: #aaa;
  text-align: center;
  line-height: 1rem;
  height: 2rem;
  padding: 0.4rem 0 0 0;
  background: none;
  /* background: url('../assets/trunUser.png') center center no-repeat; */
}

body .otherBOX b {
  width: 100%;
  font-size: 0.64rem;
  font-weight: 3;
  color: #8d8d8d;
}

.footeroff {
  width: 100%;
  display: flex;
}

.footeroff a {
  width: 33.3%;
  text-align: center;
}

.footeroff a h3 {
  font-size: 12px;
  color: #9a9a9a;
  margin: 0;
}

.footeroff a img {
  width: 25px;
  margin-top: 0.3rem;
}

.footerINPUT {
  display: flex;
  width: 100%;
}

.bigImput {
  display: block;
  width: 100%;
}

.footerOver {
  display: none;
  width: 100%;
}

.footerOver a {
  text-decoration: none;
}
</style>
